<template>
    <!-- 图文导航 -->
    <view class="navigations" :style="{ backgroundColor }">
        <u-grid :col="column" :border="false">
            <template v-for="(item, index) in navigations">
                <u-grid-item @click="navi2list(item)" v-if="index < column * row" :bg-color="backgroundColor">
                    <view class="navi-wrapper" :style="{ padding }">
                        <view v-if="item.isDisplayBubble" class="badge">
                            <text class="bubble" :style="{ backgroundColor: bubbleBg }">{{ item.bubble }}</text>
                        </view>
                        <img-cache :src="`${global.productImageUrl}${item.picId}/1`" width="100%" mode="widthFix" :borderRadius="radius" bg-color="#FFFFFF"></img-cache>
                        <view class="name u-line-1" v-if="show" :style="{ color }">
                            {{ item.name }}
                        </view>
                    </view>
                </u-grid-item>
            </template>
        </u-grid>
    </view>
</template>

<script lang="ts" setup>
import global from '@/config/index'
import { computed, inject } from 'vue'

const data = inject<any>('data')

let show = computed(() => {
    return data.showTitle
})

let color = computed(() => {
    return data.style.textColor || '#333333'
})

let radius = computed(() => {
    return [0, 20, '100%'][data.style.imageStyle]
})

let padding = computed(()=>{
    let temp = data.style
    return `${temp.marginTopAndBottom}px ${temp.marginLeftAndRight}px`
})

let backgroundColor = computed(() => {
    return data.style.backgroundColor || 'white'
})

let row = computed(() => {
    return data.style.row || 2
})

let column = computed(() => {
    return data.style.column || 4
})

let navigations = computed(() => {
    return data.naviList.map((m: any) => {
        return {
            name: m.name,
            picId: m.image,
            bubble: m.bubbleText,
            isDisplayBubble: m.addBubbleText,
            url: m.url
        }
    })
})

let bubbleBg = computed(()=>{
    return data.style.bubbleBackgroundColor || '#fc4f75'
})

function navi2list(item: any) {
    let { urlId, urlType } = item.url
    let name = item.name
    uni.$u.$util.jumpByUrlType(urlId, urlType, name)
}
</script>

<style lang="scss" scoped>
.navigations {
    width: 100%;
    background: $uni-bg-color;
    flex-wrap: wrap;
    overflow: hidden;
    margin-bottom: 20rpx;
    .name {
        font-size: 28rpx;
        text-align: center;
    }

    .badge {
        position: relative;

        .bubble {
            position: absolute;
            z-index: 10;
            font-size: 20rpx;
            color: $uni-bg-color;
            border-radius: 10rpx;
            text-align: center;
            padding: 0 5rpx;
            /* #ifdef APP-PLUS */
            min-width: 40rpx;
            right: -60rpx;
            top: 0rpx;
            /* #endif */
            /* #ifdef H5 */
            min-width: 80rpx;
            right: -100rpx;
            top: -20rpx;
            transform: scale(0.8);
            /* #endif */
        }
    }

    .navi-wrapper {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
    }
}
:deep(.u-grid-item-box) {
    padding: 0 !important;
}
</style>
